<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>轮播组件整理</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <style type="text/css">
        /**banner start**/
        #slider {
            width: 100%;
            overflow: hidden;
            position:relative;
        }
        #slider .swiper-slide {
            position:relative;
            text-align:center;
        }
        #slider img {
            max-width: 100%;
        }
        #slider .swiper-pagination {
            position: absolute;
            z-index: 20;
            bottom: 10px;
            width: 100px;
            text-align: center;
            left:40%;
        }
        #slider .swiper-pagination-bullet {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius:5px;
            background: #fff;
            margin: 0 2px;
            opacity: 0.8;
            cursor: pointer;
        }
        #slider .swiper-pagination-bullet-active {
            background: #ff6600;
        }
        /**banner end**/
    </style>
</head>
<body>

<div class="aui-content" id="app">
    <!--baner start-->
    <div id='slider' class='swipe'>
        <div class='swiper-wrapper'>
            <div class="swiper-slide" v-for="(vo,index) in list">
                <img :src="vo.spic"/>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!--baner end-->
</div>

</body>
</html>
<script src="../script/vue.js"></script>
<script src="../script/swiper.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    "zid": "40",
                    "sname": "迎新年送年货",
                    "spic": "http://image.fumintouzi.com/201612/2016122317-4912-16655.png",
                    "IIndex": "0",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "42",
                    "sname": "年会",
                    "spic": "http://image.fumintouzi.com/201612/2016122617-5054-79123.jpg",
                    "IIndex": "0",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "1",
                    "sname": "",
                    "spic": "http://image.fumintouzi.com/201609/2016092209-5128-54312.jpg",
                    "IIndex": "1",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "2",
                    "sname": "",
                    "spic": "http://image.fumintouzi.com/201609/2016092209-5157-88844.png",
                    "IIndex": "1",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "3",
                    "sname": "",
                    "spic": "http://image.fumintouzi.com/201609/2016092209-5209-92421.jpg",
                    "IIndex": "2",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "4",
                    "sname": "",
                    "spic": "http://image.fumintouzi.com/201609/2016092209-5220-47912.png",
                    "IIndex": "2",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "5",
                    "sname": "",
                    "spic": "http://image.fumintouzi.com/201609/2016092209-5230-33726.jpg",
                    "IIndex": "2",
                    "ILocation": "2",
                    "Status": "True"
                },
                {
                    "zid": "23",
                    "sname": "运营报告",
                    "spic": "http://image.fumintouzi.com/201610/2016102511-3632-10494.jpg",
                    "IIndex": "3",
                    "ILocation": "2",
                    "Status": "True"
                }
            ]
        }
    });

    setTimeout(function () {
        var slider = new Swiper('#slider', {
            autoplay: 3000,
            visibilityFullFit : true,
            loop: true,
            pagination: '.swiper-pagination',
            paginationClickable: true,
        });
    },100);

</script>